<template>
  <zc-card class="zcx">
    <el-tabs :tab-position="tabPosition" @tab-click="selectSubItem">
      <el-tab-pane label="参数配置">
        <div class="params-setting">参数配置</div>
        <avue-form ref="form" v-model="obj0" :option="option">
          <template slot="certificate_key">
            <div v-if="obj0.id">
              <tinymce v-model="obj0.certificate_key" :height="200" />
            </div>
          </template>
          <template slot="menuForm">
            <el-button type="primary" @click="handleSubmit">提 交</el-button>
          </template>
        </avue-form>
      </el-tab-pane>
      <el-tab-pane label="显示设置">
        <avue-form
          ref="form2"
          :upload-after="uploadAfter"
          :upload-before="uploadBefore"
          v-model="form2"
          :option="option2"
        >

          <template slot="about_us">
            <div v-if="form2.id">
              <tinymce v-model="form2.about_us" :height="100" />
            </div>
          </template>
          <template slot="distribution_policy">
            <div v-if="form2.id">
              <tinymce v-model="form2.distribution_policy" :height="100" />
            </div>
          </template>

          <template slot="distribution_agreement">
            <div v-if="form2.id">
              <tinymce
                v-model="form2.distribution_agreement"
                :height="100"
              
              />
            </div>
          </template>
          <template slot="menuForm">
            <el-button type="primary" @click="handleSubmit2">提 交</el-button>
          </template>
        </avue-form>
      </el-tab-pane>
      <el-tab-pane label="短信设置">
        <div class="params-setting">短信配置</div>
        <avue-form ref="form3" v-model="form3" :option="option3">
          <template slot="menuForm">
            <el-button type="primary" @click="handleSubmit3">提 交</el-button>
          </template>
        </avue-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
    </el-tabs>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </zc-card>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import option from "./params-setting-options.js";
import {
  wxUpdate,
  wxGetList,
  updateShow,
  getShowList,
  updateShortMessage,
  getShortMessageList,
} from "@/api/admin/params-setting.js";
import { getToken } from "@/utils/auth";
const defaultSettings = require("../../settings.js");
export default {
  components: {
    Tinymce,
  },
  data() {
    return {
      dataToken: {
        key: getToken(),
      },
      actionUrl: defaultSettings.uploadImgAll,
      tabPosition: "left",
      obj0: {}, // 参数配置
      option: {}, // 参数配置
      form2: {}, // 显示配置
      option2: {}, // 显示配置
      form3: {}, // 短信配置
      option3: {}, // 短信配置
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    console.log(option);
    this.option = option.option;
    this.option2 = option.option2;
    this.option3 = option.option3;
    this.init();
  },
  methods: {
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      let url = res.datas.src;
      console.log("上传图片", res);
      // this.form2.share_img = URL.createObjectURL(file.raw);
      this.form2.share_img = res.datas.src;
    },
    beforeAvatarUpload(file) {
      return true;
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 上传前
    uploadBefore(file, done, loading) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      let index = file.name.lastIndexOf(".");
      let suffix = file.name.substr(index + 1);
      // 图片处理
      if (suffix == "png" || suffix == "jpg" || suffix == "jpeg") {
        if (!isLt2M) {
          loading();
          this.$message.error("上传图片大小不能超过 10MB!");
          return;
        } else {
          done();
          return;
        }
      } else {
        loading();
        this.$message.error("请上传正确的格式的文件");
        return;
      }

      // 文件处理

      // if (
      //   suffix == "pdf" ||
      //   suffix == "doc" ||
      //   suffix == "docx" ||
      //   suffix == "xlsx"
      // ) {
      //   this.form.info_files_name.push(fileName);
      //   this.form.info_files_suffix.push(suffix);
      //   done();
      //   return;
      // }

      // 什么都不是

      // if (suffix) {
      //   loading();
      //   this.$message.error("请上传正确的格式");
      // }
    },
    uploadAfter(res, done) {
      // return;

      console.log("上传图片", res);
  
      done();
    },
    selectSubItem(e) {
      if (e.index == 0) {
        wxGetList({}).then((res) => {
          this.obj0 = res;
        });
      }
      if (e.index == 1) {
        getShowList({}).then((res) => {
          console.log("显示参数", res);
          this.form2 = res;
        });
      }
      if (e.index == 2) {
        getShortMessageList({}).then((res) => {
          this.form3 = res;
        });
      }
    },
    init() {
      wxGetList({}).then((res) => {
        this.obj0 = res;
      });
      getShowList({}).then((res) => {
        console.log("显示参数", res);
        this.form2 = res;
      });
      getShortMessageList({}).then((res) => {
        this.form3 = res;
      });
    },
    handleSubmit() {
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          console.log(this.obj0);

          wxUpdate(this.obj0).then((res) => {
            this.$message.success("修改成功");
            done();
          });
        }
      });
    },
    handleSubmit2() {
      this.$refs.form2.validate((vaild, done) => {
        if (vaild) {
          console.log("参数修改", this.form2);

          updateShow(this.form2).then((res) => {
            this.$message.success("修改成功");
            done();
          });
        }
      });
    },
    handleSubmit3() {
      this.$refs.form3.validate((vaild, done) => {
        if (vaild) {
          console.log("参数修改", this.form3);
          updateShortMessage(this.form3).then((res) => {
            this.$message.success("修改成功");
            done();
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zcx {
  min-height: 500px;
}
.params-setting {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  margin-bottom: 25px;
  margin-left: 42px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>